<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src='表格/js/vue.js'></script>
  <style type="text/css">
  	td{
		border: 1px solid black;
	}
  </style>
 </head>
 <body>
  <div id="box">
	<table style="text-align: center;">
		<thead>
			<tr>
				<td v-for="(item,index) in th">
					{{item}}
				</td>
			</tr>
		</thead>
		<tbody>
			<!-- 使用watch写法将filtb改为tb2,使用computed写法将tb2改为filtb -->
			<tr v-for="(item,index) in filtb" :key='item.xh'>
				<td >
					{{item.xm}}
				</td>
				<td >
					{{item.xh}}
				</td>
				<td >
					{{item.jxbm}}
				</td>
				<td >
					{{item.age}}
				</td>
				<td >
					{{item.zy}}
				</td>
				<td >
					{{item.bj}}
				</td>
				<td @click="delect(index)">
					<a href="#" >
						{{item.cz}}
					</a>
				</td>
			</tr>
		</tbody>
	</table>
	<input type="text" placeholder="输入姓名" v-model="txt"/>
	<input type="button" value="升序" @click='flag=2'>
	<input type="button" value="降序" @click='flag=1'/>
	<input type="button" value="原顺序" @click='flag=0'/>
  </div>
 </body>
 <script>
 Vue.config.productionTip= false;
  var vm=new Vue({
   el:'#box',
   data:{ //数据函数
		th:['姓名','学号','教学部门','年龄','专业','班级','操作'],
		tb:[{xm:'张三',xh:'21905180101',jxbm:'信息工程',age:7,zy:'计算机应用技术',bj:'19高计应',cz:'删除'},
			{xm:'李四',xh:'21905180102',jxbm:'信息工程',age:19,zy:'计算机应用技术',bj:'19高计应',cz:'删除'},
			{xm:'王五',xh:'21905180103',jxbm:'信息工程',age:21,zy:'计算机应用技术',bj:'19高计应',cz:'删除'},
			{xm:'龙祖豪',xh:'21905280114',jxbm:'信息工程',age:18,zy:'计算机应用技术',bj:'19高计应',cz:'删除'},
			{xm:'小龙',xh:'21905280115',jxbm:'信息工程',age:20,zy:'计算机应用技术',bj:'19高计应',cz:'删除'}],
		txt:'',
		tb2:[] ,//定义一个空数组将tb的筛选数据赋值给tb2
		//tb3:[] ,//定义一个空数组将tb2的筛选数据赋值给tb3
		flag:''
   },
   methods:{//方法函数
		delect(i){
			this.tb.splice(i,1) 
			//this.tb2.splice(i,1)
		}
    },
	//计算属性写法
	computed:{ //计算属性
		filtb(){
			const arr= this.tb.filter((t)=>{
				return t.xm.indexOf(this.txt)!=-1
			 })
			 if(this.flag){ //排序方法
				 arr.sort((a,b)=>{
					 return this.flag==1?b.age-a.age:a.age-b.age;
				 })
			 }
			 return arr;
		 }
	},
	 /*watch写法*/
	// watch:{
	// 	txt:{
	// 		immediate:true,
	// 		handler(val){
	// 			this.tb2=this.tb.filter((t)=>{
	// 				return t.xm.indexOf(val)!=-1
	// 			})
	// 		}
	// 	},
	// 	flag:{
	// 		handler(val){
				
	// 			if(val){
	// 				this.tb2.sort((a,b)=>{
	// 					return this.flag==1?b.age-a.age:a.age-b.age
	// 				})
	// 			}
	// 			else
	// 				this.tb2=arr
	// 		}
	// 	}
	// }
  })
 </script>
</html>
